<!DOCTYPE>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <base th:href="@{/}">
    <meta charset="UTF-8">
    <title>待审核退换货订单列表</title>
    <!-- 加载Vue框架的库文件 -->
    <script src="js/vue.js"></script>
    <!-- 加载Axios框架的库文件 -->
    <script src="js/axios.js"></script>
    <!-- 加载jQuery的库文件 -->
    <script src="js/jquery-3.6.0.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- 导入外部css文件 -->
    <link rel="stylesheet" href="css/navigationY.css">
    <style>
        /*上方导航栏标签样式*/
        a{
            text-decoration:none;
            width: 100%;
            height: 100%;
            display: block;
        }
        /* 上方导航栏 */
        #nav{
            position: absolute;
            left: 170px;
            top: 60px;
            width: 1350px;
            height: 35px;
            background-color: rgba(193, 188, 184, 0.55);
        }
        #sub1{
            position: absolute;
            left: 350px;
            top: 180px;
        }
        #sub2{
            position: absolute;
            left: 335px;
            top: 225px;
        }
        #sub3{
            position: absolute;
            left: 350px;
            top: 270px;
        }
        #sub4{
            position: absolute;
            left: 350px;
            top: 315px;
        }
        /*表格样式*/
        #table{
            width:1200px;
            height:350px;
            /*border:1px solid black;*/
            position: absolute;
            top:380px;
            left:250px;
        }
    </style>
</head>
<body>
<!-- 最上方logo -->
<div id="app">
    <div id="top">
        <div id="logo">
            <p>
                <span>禧创</span>
            </p>
            <i class="el-icon-s-operation"></i>
        </div>
        <div id="sub">
            <p>
                <span>OCP全渠道数字平台</span>
            </p>
        </div>
        <div id="detail">
            <el-row>
                <el-button class="el-icon-chat-dot-round" type="danger" style="color: white;" circle></el-button>
                <el-button class="el-icon-s-custom" type="danger" style="color: white;" circle></el-button>
            </el-row>
        </div>
        <div id="exit">
            <el-button class="el-icon-switch-button" type="danger" style="color: white;" circle></el-button>
        </div>
    </div>
    <!-- 上方导航栏 -->
    <div id="nav">
        <el-menu
                :default-active="activeIndex2"
                class="el-menu-demo"
                mode="horizontal"
                @select="handleSelect"
                background-color="#545c64"
                text-color="#fff"
                active-text-color="#ffd04b">
            <el-menu-item index="1"><a href="unChecked.html">待审核退换货订单列表</a></el-menu-item>
            <el-menu-item index="2"><a href="exchangeY.html">退换货订单列表</a></el-menu-item>
        </el-menu>
    </div>

    <div id="sub1">
        <el-form :inline="true" :model="formInline" class="demo-form-inline" size="mini">
            <el-form-item label="会员名称：">
                <el-input v-model="formInline.name" placeholder="请输入会员名称" clearable></el-input>
            </el-form-item>
            <el-form-item label="退换货订单编号：">
                <el-input v-model="formInline.coding" placeholder="请输入退换货订单编号" clearable></el-input>
            </el-form-item>
            <el-form-item label="提交退换货日期：">
                <el-date-picker
                        v-model="value1"
                        type="date"
                        placeholder="选择日期">
                </el-date-picker>
            </el-form-item>
        </el-form>
    </div>

    <div id="sub2">
        <el-form :inline="true" :model="formInline" class="demo-form-inline" size="mini">
            <el-form-item label="经销商账号：">
                <el-input v-model="formInline.account" placeholder="请输入经销商账号" clearable></el-input>
            </el-form-item>
            <el-form-item label="原销售单来源单号：">
                <el-input v-model="formInline.odd" placeholder="请输入原销售单来源单号" clearable></el-input>
            </el-form-item>
            <el-form-item label="仓库名称：">
                <el-input v-model="formInline.storename" placeholder="请输入仓库名称" clearable></el-input>
            </el-form-item>
        </el-form>
    </div>

    <div id="sub3">
        <el-form :inline="true" :model="formInline" class="demo-form-inline" size="mini">
            <el-form-item label="快递公司：">
                <el-input v-model="formInline.company" placeholder="请输入快递公司" clearable></el-input>
            </el-form-item>
            <el-form-item label="快递单号：">
                <el-input v-model="formInline.odd1" placeholder="请输入快递单号" clearable></el-input>
            </el-form-item>
            <el-form-item label="退货原因：">
                <el-input v-model="formInline.reason" placeholder="请输入退货原因" clearable></el-input>
            </el-form-item>
        </el-form>
    </div>

    <div id="sub4">
        <el-form :inline="true" :model="formInline" class="demo-form-inline" size="mini">
            <el-form-item label="订单状态：">
                <el-select v-model="formInline.state" placeholder="请选择">
                    <el-option label="待审核" value="dsh"></el-option>
                    <el-option label="待收货" value="dsh"></el-option>
                    <el-option label="待结算" value="djs"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="订单类型：">
                <el-select v-model="formInline.type" placeholder="请选择">
                    <el-option label="退货" value="return"></el-option>
                    <el-option label="换货" value="change"></el-option>
                    <el-option label="全部" value="all"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="warning" @click="onReset">重置</el-button>
                <el-button type="primary" @click="onSearch" icon="el-icon-search">查询</el-button>
            </el-form-item>
        </el-form>
    </div>

    <!--表格-->
    <div id="table">
        <el-table :data="tableData" border style="border:1px solid darkgrey" size="mini" :fit="true"
                  :header-cell-style="{background:'darkgray',color:'#fff'}">
            <el-table-column type="selection"></el-table-column>
            <el-table-column type="index" label="序号" align="center"></el-table-column>
            <el-table-column prop="" label="订单类型" align="center"></el-table-column>
            <el-table-column prop="" label="退换货订单编号" align="center"></el-table-column>
            <el-table-column prop="" label="提交退换货日期" align="center"></el-table-column>
            <el-table-column prop="" label="原销售订单号" align="center"></el-table-column>
            <el-table-column prop="" label="原销售单来源单号" align="center"></el-table-column>
            <el-table-column prop="" label="订单状态" align="center"></el-table-column>
            <el-table-column prop="" label="退货方式" align="center"></el-table-column>
            <el-table-column prop="" label="会员名称" align="center"></el-table-column>
            <el-table-column prop="" label="原发货仓库名称" align="center"></el-table-column>
            <el-table-column prop="" label="退回仓库" align="center"></el-table-column>
            <el-table-column prop="" label="操作" align="center" width="300px">
                <el-row>
                    <el-button type="danger" @click="dialogTableVisible = true" size="mini">订单信息</el-button>
                    <el-button type="danger" @click="dialogTableVisible1 = true" size="mini">订单产品列表</el-button>
                    <el-button type="success" size="mini" @click="check">审核</el-button>
                </el-row>
            </el-table-column>
        </el-table>
    </div>

    <!--弹窗-->
    <el-dialog title="订单信息" :visible.sync="dialogTableVisible">
        <el-table :data="gridData" border size="mini" :cell-style="myCellStyle">
            <el-table-column property="order1" label="" width="140" align="center"></el-table-column>
            <el-table-column property="order2" label="" width="225" align="center"></el-table-column>
            <el-table-column property="order3" label="" width="140" align="center"></el-table-column>
            <el-table-column property="order4" label="" width="220" align="center"></el-table-column>
        </el-table>
    </el-dialog>

    <el-dialog title="订单产品列表" :visible.sync="dialogTableVisible1">
        <el-table :data="gridData1" border size="mini" :header-cell-style="{background:'darkgray',color:'#fff'}">
            <el-table-column type="index" label="序号" width="140" align="center"></el-table-column>
            <el-table-column property="code" label="产品编码"  align="center"></el-table-column>
            <el-table-column property="type" label="产品型号"  align="center"></el-table-column>
            <el-table-column property="class" label="品类"  align="center"></el-table-column>
            <el-table-column property="amount" label="订退数量"  align="center"></el-table-column>
            <el-table-column property="fares" label="开票价（元）"  align="center"></el-table-column>
            <el-table-column property="returnedMoney" label="退货金额（元）"  align="center"></el-table-column>
            <el-table-column property="remark" label="备注"  align="center"></el-table-column>
        </el-table>
    </el-dialog>

    <!-- 侧边导航栏 -->
    <div id="left">
        <template>
            <div class="demo-type">
                <!--管理员头像-->
                <div class="img">
                    <el-avatar :size="60" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
                </div>
                <div class="msg">
                    <!-- 管理员姓名 -->
                    <span>Name</span>
                    <br>
                    <span>管理员</span>
                </div>
            </div>
        </template>
        <el-menu
                default-active="2"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose"
                background-color="#989494"
                text-color="white"
        >
            <el-submenu index="1">
                <template slot="title">
                    <i class="el-icon-s-home" style="color: white"></i>
                    <span>首页</span>
                </template>
            </el-submenu>
            <el-submenu index="2">
                <template slot="title">
                    <i class="el-icon-document-copy" style="color: white"></i>
                    <span>备货订单管理</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="2-1">备货计划列表</el-menu-item>
                    <el-menu-item index="2-2">待审核备货订单</el-menu-item>
                    <el-menu-item index="2-3">待复核备货订单</el-menu-item>
                    <el-menu-item index="2-4">汇总计划列表</el-menu-item>
                </el-menu-item-group>
            </el-submenu>
            <el-submenu index="3">
                <template slot="title">
                    <i class="el-icon-data-line" style="color: white"></i>
                    <span>销售订单管理</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="3-1">零售订单列表</el-menu-item>
                    <el-menu-item index="3-2">批发订单列表</el-menu-item>
                    <el-menu-item index="3-3">待审核批发订单</el-menu-item>
                    <el-menu-item index="3-4">待复核批发订单</el-menu-item>
                </el-menu-item-group>
            </el-submenu>
            <el-submenu index="4">
                <template slot="title">
                    <i class="el-icon-bell" style="color: white"></i>
                    <span>售后管理</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="4-1"><a href="unChecked.html">待审核退换货订单列表</a></el-menu-item>
                    <el-menu-item index="4-2"><a href="exchangeY.html">退换货订单列表</a></el-menu-item>
                </el-menu-item-group>
            </el-submenu>
            <el-submenu index="5">
                <template slot="title">
                    <i class="el-icon-user" style="color: white"></i>
                    <span>经销商管理</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="5-1">经销商列表</el-menu-item>
                </el-menu-item-group>
            </el-submenu>
            <el-submenu index="6">
                <template slot="title">
                    <i class="el-icon-shopping-cart-full" style="color: white"></i>
                    <span>库存管理</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="6-1">仓库维护</el-menu-item>
                    <el-menu-item index="6-2">菜鸟仓库存列表</el-menu-item>
                    <el-menu-item index="6-3">工厂库存列表</el-menu-item>
                    <el-menu-item index="6-4">调拨单列表</el-menu-item>
                    <el-menu-item index="6-5">创建调拨单</el-menu-item>
                </el-menu-item-group>
            </el-submenu>
            <el-submenu index="7">
                <template slot="title">
                    <i class="el-icon-goods" style="color: white"></i>
                    <span>产品管理</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="7-1">产品列表</el-menu-item>
                </el-menu-item-group>
            </el-submenu>
            <el-submenu index="8">
                <template slot="title">
                    <i class="el-icon-suitcase-1" style="color: white"></i>
                    <span>内容维护</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="8-1">首页公告列表</el-menu-item>
                    <el-menu-item index="8-2">首页咨讯列表</el-menu-item>
                    <el-menu-item index="8-3">首页信息平台列表</el-menu-item>
                </el-menu-item-group>
            </el-submenu>
            <el-submenu index="9">
                <template slot="title">
                    <i class="el-icon-setting" style="color: white"></i>
                    <span>系统配置</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="9-1"><a href="operationManagement.html">运营账号管理</a></el-menu-item>
                    <el-menu-item index="9-2"><a href="distributorManagement.html">经销商账号管理</a></el-menu-item>
                    <el-menu-item index="9-3">菜单管理</el-menu-item>
                    <el-menu-item index="9-4"><a href="roleManagement.html">运营角色管理</a></el-menu-item>
                    <el-menu-item index="9-5">日志</el-menu-item>
                    <el-menu-item index="9-6">数据字典</el-menu-item>
                    <el-menu-item index="9-7">机构管理</el-menu-item>
                    <el-menu-item index="9-8">产品类别</el-menu-item>
                </el-menu-item-group>
            </el-submenu>
        </el-menu>
    </div>
</div>
</body>
<script type="module">
    let vm=new Vue({
        el:'#app',
        data(){
            return{
                activeIndex2: '1',
                formInline: {
                    name:'',
                    coding:'',
                    account:'',
                    odd:'',
                    storename:'',
                    company:'',
                    odd1:'',
                    reason:'',
                    state:'',
                    type:'',
                },
                value1: '',
                tableData:[{},{},{},{},{},{},{},{},{},{}],

                gridData: [{
                    order1:'提交退货日期',
                    order2:'',
                    order3:'退货订单编号',
                    order4:''
                },{
                    order1:'原销售订单号',
                    order2:'',
                    order3:'运费支付方式',
                    order4:''
                },{
                    order1:'原销售单来源单号',
                    order2:'',
                    order3:'原发票号',
                    order4:''
                },{
                    order1:'订单状态',
                    order2:'',
                    order3:'收货人',
                    order4:''
                },{
                    order1:'退货方式',
                    order2:'',
                    order3:'手机号码',
                    order4:''
                },{
                    order1:'会员名称',
                    order2:'',
                    order3:'省份',
                    order4:''
                },{
                    order1:'原发货仓库名称',
                    order2:'',
                    order3:'地市',
                    order4:''
                },{
                    order1:'退回仓库',
                    order2:'',
                    order3:'县/区',
                    order4:''
                },{
                    order1:'退货金额',
                    order2:'',
                    order3:'邮编',
                    order4:''
                },{
                    order1:'换货金额',
                    order2:'',
                    order3:'街道地址',
                    order4:''
                },{
                    order1:'运费金额',
                    order2:'',
                    order3:'详细送货地址',
                    order4:''
                },{
                    order1:'快递公司',
                    order2:'',
                    order3:'退换原因',
                    order4:''
                },{
                    order1:'快递单号',
                    order2:'',
                    order3:'是否物流原因',
                    order4:''
                },{
                    order1:'发票备注',
                    order2:'',
                    order3:'下载附件',
                    order4:''
                },{
                    order1:'审核人',
                    order2:'',
                    order3:'审核日期',
                    order4:''
                },{
                    order1:'结算人',
                    order2:'',
                    order3:'结算时间',
                    order4:''
                },{
                    order1:'经销商账号',
                    order2:'',
                    order3:'备注',
                    order4:''
                }],
                gridData1:[{},{},{},{},{},{},{},{},{},{}],
                dialogTableVisible: false,
                dialogTableVisible1: false,
            };
        },
        methods:{
            onReset(){
                alert("==========重置")
            },
            onSearch() {
                alert("==========查询")
            },
            check() {
                this.$confirm( '订单审核', {
                    confirmButtonText: '审核通过',
                    cancelButtonText: '不通过',
                    type: 'warning'
                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '审核通过!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '审核不通过'
                    });
                });
            },

            myCellStyle(row) {
                if (row.columnIndex === 0) {
                    return { backgroundColor: "darkgrey", color: "black" };
                }
                return "";
            },
            handleOpen(key,keyPath){
                console.log(key,keyPath);
            },
            handleClose(key,keyPath){
                console.log(key,keyPath);
            },
            handleSelect(key,keyPath){
                console.log(key,keyPath);
            },
        }
    });
</script>
</html>